<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>麦知网——学问有余，可为人师</title>

<!-- Bootstrap core CSS -->
<link href="../../../css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../../../css/non-responsive.css" rel="stylesheet">
<link href="../../../css/font-awesome.min.css" rel="stylesheet">
<link href="../../../css/unslider.css" rel="stylesheet">    
 <link href="../../../css/courseList.css" rel="stylesheet">    
 
</head>
<body>
	{% include 'public/common/header.html' %}
	<div class="container" style="margin-top:45px">
		<div class="row">
<!-- left div -->
			<div class="col-xs-9">
				<div>
					<div class="pull-left">
					<ol class="breadcrumb courseList_breadcrumb">
					  <li><a href="{% url 'courses:types' %}">课程系列</a></li>
					  <li><a href="{% url 'courses:tinytypes' types.id %}">{{types.name}}</a></li>
					  <li class="active">{{tiny.name}}</li>
					</ol>
				</div>
				<div class="selDiv pull-right">
					<select id="selectWay" onchange="changeCourseOrder();"> 
						{% ifequal sel 1 %}  
				        <option value="1" selected>按价格排列</option>   
				        <option value="2">按时间排列</option>   
				        <option value="3">按人气排列</option>
				        {% endifequal %}   
				        {% ifequal sel 2 %}
				        <option value="1">按价格排列</option>   
				        <option value="2" selected>按时间排列</option>   
				        <option value="3">按人气排列</option> 
				        {% endifequal %}
				        {% ifequal sel 3 %}
				        <option value="1">按价格排列</option>   
				        <option value="2">按时间排列</option>   
				        <option value="3" selected>按人气排列</option> 
				        {% endifequal %}
				   	</select>  
				</div>
				<div class="clearfix"></div>
				</div>
<!-- 一个课程 循环开始处 -->
				{% for i in result %}
				<div class="cl_a_course">
					<div>
						<div class="pull-left cl_a_course_left">
							<img src="{{i.9}}/{{i.0}}" width="100%"/>
						</div>
						<div class="pull-left cl_a_course_right">
							<div class="cl_a_course_right1">
								<div class="pull-left cl_course_name"><b>{{i.1}}</b></div>
								<div class="pull-left">
<!-- 用星星评价的地方    第一个span是黄色星星  第二个span是空心星星  分别循环   -->
									<span class="yellow_star">&#9733</span><span class="yellow_star">&#9733</span><span class="yellow_star">&#9733</span><span class="yellow_star">&#9733</span><span>☆</span>
<!-- 用星星评价的地方 结束 -->							
								</div>
								<div class="pull-left cl_font">（{{i.7}}人评价）</div>
								<div class="pull-left cl_font">{{i.8}}人购买</div>
								<div class="pull-right"><span class="badge" style="background-color:#2EA2CD">￥{{i.3}}</span></div>
								<div class="clearfix"></div>
							</div>
							<div class="cl_intro"><i>
								{{i.2}}
							</i></div>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="a_course_bottom">
						<div class="pull-left a_course_bottom1">讲师：<b>{{i.4}}</b></div>
						<div class="pull-right a_course_bottom2"><a href="{% url 'courses:thecourse' i.5 %}">点击查看</a></div>
						<div class="clearfix"></div>
					</div>
				</div>
				{% endfor %}
<!-- 一个课程 循环结束处 -->
				<div class="clearfix"></div>
				<ul class="pager">
				{% if course.has_previous %}
					  <li><a href="javascript:void(0)" onclick="changeCoursePage({{ course.previous_page_number }});">&larr;上一页</a></li>
					{% endif %}
					共 {{ course.number }} 页  第 {{ course.paginator.num_pages }} 页.
					{% if course.has_next %}
					  <li><a href="javascript:void(0)" onclick="changeCoursePage({{ course.next_page_number }});">下一页&rarr;</a></li>
				{% endif %}
				</ul>
			</div>

<!-- right div -->
			<div class="col-xs-3">
				<div><img src="http://mztypes.qiniudn.com/001.png" width="100%"/></div>
				<!--<div ><a href=""><span class="glyphicon glyphicon-globe"></span> 热门推荐</a></div>-->
				<div class="hot_newpage"><a href="{% url 'courses:coursecreate' %}"><b><i class="icon-cloud-upload"></i> 创建新的课程</b></a></div>
<!-- 推荐 -->
				<div class="my">
					<div class="banner" style="width:500px;">
						<ul style="height:500px;">
							<li style="background-color:#F8F8FF;">
								<div class="inner">
									<div class="my_title"><b>本分类热门用户</b></div>
<!-- 前三个推荐  循环开始处 -->
								{% for i in user1 %}
									<div class="a_guy">
										<div class="pull-left person_avatar"><a href="{% url 'users:home' i.5 %}"><img src="{{i.1}}/{{i.2}}" width="100%"/></a></div>
										<div class="pull-left person_content">
											<div><span class="person_name"><a href="{% url 'users:home' i.5 %}"><b>{{i.0}}</b></a></span></div>
											<div class="show_person control_len">{{i.3}}</div>
											<div class="show_person">
												<span><a href="{% url 'users:home' i.5 %}">个人主页</a></span>
												<!--<span class="focus"><button id="add{{i.4}}" type="button" onclick="add({{i.4}})" class="btn btn-info btn-xs">+ 关注</button><button id="abord{{i.4}}" style="display:none" type="button" onclick="abord({{i.4}})" class="btn btn-danger btn-xs">取消关注</button></span>-->
											</div>
										</div>
										<div class="clearfix"></div> 
									</div>
								{% endfor %}
<!-- 前三个推荐  循环结束处 -->
								</div>
							</li>
			
							<li style="background-color:#F8F8FF;">
								<div class="inner">
									<div class="my_title"><b>本分类热门用户</b></div>
<!-- 后三个推荐  循环开始处 -->
								{% for i in user2 %}
									<div class="a_guy">
										<div class="pull-left person_avatar"><a href="{% url 'users:home' i.5 %}"><img src="{{i.1}}/{{i.2}}" width="100%"/></a></div>
										<div class="pull-left person_content">
											<div><span class="person_name"><a href="{% url 'users:home' i.5 %}"><b>{{i.0}}</b></a></span></div>
											<div class="show_person">{{i.3}}</div>
											<div class="show_person">
												<span><a href="{% url 'users:home' i.5 %}">个人主页</a></span>
												<!--<span class="focus"><button id="add{{i.4}}" type="button" onclick="add({{i.4}})" class="btn btn-info btn-xs">+ 关注</button><button id="abord{{i.4}}" style="display:none" type="button" onclick="abord({{i.4}})" class="btn btn-danger btn-xs">取消关注</button></span>-->
											</div>
										</div>
										<div class="clearfix"></div> 
									</div>
								{% endfor %}
<!-- 后三个推荐  循环结束处 -->
								</div>
							</li>
			
						</ul>
					</div>
		
		
		
					
				
				</div>
<!-- 推荐 结束处-->
			</div>
		</div>
	</div>
	
	
	
	
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="../../../js/jquery.min.js"></script>
	
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="../../../js/bootstrap.js"></script>
	<script src="../../../js/unslider.js"></script>
	<script src="../../../js/add.js"></script>
	<script src="../../../js/logout.js"></script>
	<script type="text/javascript">
	//本分类热门用户 轮播JS 用的是bootstrap的轮播
	if(window.chrome) {
			$('.banner li').css('background-size', '100% 100%');
		}

		$('.banner').unslider({
			//arrows: true,
			fluid: true,
			dots: true
		});

	//改变课程的排序方式（按时间 按价格 按人气）
	function changeCourseOrder() {
		var sel=$("#selectWay").val();
		var url=window.location.href.split('?')[0]+'?sel='+sel;
		//alert(url);
		window.location.replace(url);
	}
	
	//下一页 （保持排序方式）	
	function changeCoursePage(page) {
		var sel=$("#selectWay").val();
		var url=window.location.href.split('?')[0]+'?sel='+sel+'&page='+page;
		//alert(url);
		window.location.replace(url);
	}
	</script>
</body>
</html>